<template>
  <div class="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-shadow">
    <div class="relative">
      <img
        :src="flower.image"
        :alt="flower.name"
        class="w-full h-48 object-cover"
      >
      <div class="absolute top-2 left-2 flex flex-wrap gap-1">
        <span
          v-if="flower.other?.includes('新品')"
          class="px-2 py-1 text-xs font-semibold rounded bg-blue-500 text-white"
        >
          新品
        </span>
        <span
          v-if="flower.other?.includes('热销')"
          class="px-2 py-1 text-xs font-semibold rounded bg-red-500 text-white"
        >
          热销
        </span>
      </div>
      <div class="absolute bottom-2 left-2 flex flex-wrap gap-1">
        <span
          v-if="flower.other?.includes('含礼品')"
          class="px-2 py-1 text-xs font-semibold rounded bg-pink-500 bg-opacity-90 text-white"
        >
          赠礼品
        </span>
        <span
          v-if="flower.other?.includes('含贺卡')"
          class="px-2 py-1 text-xs font-semibold rounded bg-purple-500 bg-opacity-90 text-white"
        >
          赠贺卡
        </span>
      </div>
      <div class="absolute top-2 right-2">
        <span
          v-if="flower.sales"
          class="px-2 py-1 text-xs font-semibold rounded bg-gray-800 bg-opacity-70 text-white"
        >
          已售 {{ flower.sales }}
        </span>
      </div>
    </div>
    <div class="p-4">
      <h3 class="text-lg font-bold mb-2">{{ flower.name }}</h3>
      <p class="text-gray-600 text-sm mb-2">{{ flower.description }}</p>
      <div class="flex items-center justify-between">
        <span class="text-primary text-xl font-bold">¥{{ flower.price }}</span>
        <el-button
          type="primary"
          size="small"
          round
          @click="addToCart(flower)"
        >
          加入购物车
        </el-button>
      </div>
    </div>
  </div>
</template>

<script setup>
import {useCartStore} from '@/stores/cart'
import {ElMessage} from "element-plus";
import {onMounted} from "vue";

const props = defineProps({
  flower: {
    type: Object,
    required: true
  }
})

const cartStore = useCartStore()

const addToCart = async (flower) => {
  await cartStore.addToCart(flower.id)
  await cartStore.initCart()
  ElMessage.success('已添加到购物车')
}
</script>

<style scoped>
.bg-opacity-90 {
  transition: opacity 0.3s;
}
.bg-opacity-90:hover {
  opacity: 1;
}
</style>
